<!--
 * @Descripttion: 自动完成选择
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年8月3日15:53:37
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-10-05 14:12:55
-->

<template>
  <skAutodcomplete
    ref="autoComp"
    v-model="defaultValue"
    :event="event"
    :assign="assignData"
    :name="name"
    :params="params"
    :disabled="disabled"
    @select="selectauto"
    :placeholder="placeholder"
    @dblclick="dbopenChoose"
    :sort="sort"
    :showIcon="com_showIcon"
    :stopDbClick="!showIcon"
    :style="{
      '--prepend-width': prepend_width,
      '--prepend-padding': prepend_padding,
    }"
    @blur="chooseEnd"
    @focus="focus"
  >
    <template #suffix>
      <el-icon class="el-input__icon" @click="iconClick" size="14">
        <component :is="icon"></component>
      </el-icon>
    </template>

    <template #prepend>
      <slot name="prepend"></slot>
    </template>

    <template #append>
      <slot name="append"></slot>
    </template>
  </skAutodcomplete>
  <skBrowserChoose
    v-if="openChooseDlg"
    v-model="openChooseDlg"
    v-on="event"
    :assign="assignData"
    :name="name"
    @close="openChooseDlg = false"
    :single="true"
    :params="params"
    @select="selectchoose"
  ></skBrowserChoose>
</template>

<script>
import skAutodcomplete from "@/components/skAutoComplete";
import skBrowserChoose from "@/components/skBrowserChoose";
import config from "@/config/autocomplete";
export default {
  props: {
    modelValue: null,
    params: {},
    beforeIconClick: {},
    event: {
      type: Object,
      default: () => {
        return {};
      },
    },
    autoclear: { type: Boolean, default: true },
    sort: { type: String, default: "" },
    name: { type: String, default: "" },
    iconName: { type: String, default: "ElIconSearch" },
    showIcon: { type: Boolean, default: true },
    browserShow: { type: Boolean, default: true },
    assign: {
      type: Object,
      default: null,
    },
    asKey: {
      type: String,
      default: "",
    },
    asField: {
      type: String,
      default: "id",
    },
    asValue: {
      type: String,
      default: null,
    },
    prepend_padding: {
      type: String,
      default: "4px",
    },
    prepend_width: {
      type: String,
      default: "70px",
    },
    placeholder: null,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["select", "update:modelValue", "iconClick"],
  components: { skAutodcomplete, skBrowserChoose },
  data() {
    return {
      defaultValue: this.modelValue,
      openChooseDlg: false,
      icon: this.iconName,
      hasIcon: true,
      assignKey: this.asKey,
      assignField: this.asField,
      assignData: this.assign,
      assignValue: this.asValue,
      oldValue: this.modelValue,
      oldAssign: null,
    };
  },
  watch: {
    defaultValue(val) {
      this.$emit("update:modelValue", val);
    },
    modelValue: {
      handler(value) {
        this.defaultValue = value;
      },
      deep: true,
    },
  },
  computed: {
    com_showIcon() {
      return this.hasIcon && this.showIcon && this.browserShow;
    },
  },
  mounted() {
    if (typeof config[this.name].browser != "undefined") {
      this.hasIcon = true;
      if (typeof config[this.name]["browser"]["icon"] != "undefined") {
        this.icon = config[this.name]["browser"].icon;
      }
    } else this.hasIcon = false;
    if (this.assignKey == "") {
      this.assignKey = this.name + "_id";
    }
  },
  methods: {
    iconClick: async function () {
      if (typeof this.beforeIconClick === "function") {
        if ((await this.beforeIconClick()) === false) {
          return;
        }
      }
      this.$emit("iconClick");
      if (!this.disabled) this.openChooseDlg = true;
    },
    triggerSelect: function () {
      return this.$refs.autoComp.triggerSelect();
    },
    dbopenChoose: function (e) {
      // this.icon = this.iconName;
      //存在browser 并且不显示图标的，双击触发
      if (this.hasIcon && !this.showIcon && this.browserShow && !this.disabled) {
        if (e) {
          e.stopPropagation();
          this.openChooseDlg = true;
        }
      }
    },
    focus: function () {
      this.oldValue = this.defaultValue;
      if (this.assignData != null) {
        this.oldAssign = this.assignData[this.assignKey];
      }
    },
    chooseEnd: function () {
      if (this.assignData != null) {
        if (this.oldAssign == this.assignData[this.assignKey] && this.autoclear) {
          this.defaultValue = this.oldValue;
        }
      }
    },
    selectchoose: function (item) {
      this.selectauto(item);
    },
    selectauto: function (item) {
      if (this.assignData != null) {
        this.assignData[this.assignKey] = item[this.assignField] ?? this.assignValue;
      }
      this.defaultValue = item[config[this.name].showfield];
      this.$emit("select", item);
      this.openChooseDlg = false;
      this.focus();
    },
  },
};
</script>

<style></style>
